import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators, FormArray} from '@angular/forms';

@Component({
    selector: 'app-advanced-form',
    templateUrl: './advanced-form.component.html',
})
export class AdvancedFormComponent implements OnInit {
    editIndex = -1;
    editObj = {};

    form: FormGroup;
    users: any[] = [
        {value: 'xiao', label: '付晓晓'},
        {value: 'mao', label: '周毛毛'},
    ];

    constructor(private fb: FormBuilder) {
    }

    ngOnInit() {
        this.form = this.fb.group({
            name: [null, [Validators.required]],
            url: [null, [Validators.required]],
            owner: [undefined, [Validators.required]],
            approver: [null, [Validators.required]],
            date_range: [null, [Validators.required]],
            type: [null, [Validators.required]],
            name2: [null, [Validators.required]],
            summary: [null, [Validators.required]],
            owner2: [null, [Validators.required]],
            approver2: [null, [Validators.required]],
            time: [null, [Validators.required]],
            type2: [null, [Validators.required]],
            items: this.fb.array([]),
        });
        const userList = [
            {
                key: '1',
                workId: '00001',
                name: 'John Brown',
                department: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                workId: '00002',
                name: 'Jim Green',
                department: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                workId: '00003',
                name: 'Joe Black',
                department: 'Sidney No. 1 Lake Park',
            },
        ];
        userList.forEach(i => {
            const field = this.createUser();
            field.patchValue(i);
            this.items.push(field);
        });
    }

    createUser(): FormGroup {
        return this.fb.group({
            key: [null],
            workId: [null, [Validators.required]],
            name: [null, [Validators.required]],
            department: [null, [Validators.required]],
        });
    }

    //#region get form fields
    get name() {
        return this.form.controls.name;
    }

    get url() {
        return this.form.controls.url;
    }

    get owner() {
        return this.form.controls.owner;
    }

    get approver() {
        return this.form.controls.approver;
    }

    get time_start() {
        return this.form.controls.time_start;
    }

    get time_end() {
        return this.form.controls.time_end;
    }

    get type() {
        return this.form.controls.type;
    }

    get name2() {
        return this.form.controls.name2;
    }

    get summary() {
        return this.form.controls.summary;
    }

    get owner2() {
        return this.form.controls.owner2;
    }

    get approver2() {
        return this.form.controls.approver2;
    }

    get time() {
        return this.form.controls.time;
    }

    get type2() {
        return this.form.controls.type2;
    }

    get items() {
        return this.form.controls.items as FormArray;
    }

    //#endregion

    add() {
        this.items.push(this.createUser());
        this.edit(this.items.length - 1);
    }

    del(index: number) {
        this.items.removeAt(index);
    }

    edit(index: number) {
        if (this.editIndex !== -1 && this.editObj) {
            this.items.at(this.editIndex).patchValue(this.editObj);
        }
        this.editObj = {...this.items.at(index).value};
        this.editIndex = index;
    }

    save(index: number) {
        this.items.at(index).markAsDirty();
        if (this.items.at(index).invalid) return;
        this.editIndex = -1;
    }

    cancel(index: number) {
        if (!this.items.at(index).value.key) {
            this.del(index);
        } else {
            this.items.at(index).patchValue(this.editObj);
        }
        this.editIndex = -1;
    }

    _submitForm() {
        for (const i in this.form.controls) {
            this.form.controls[i].markAsDirty();
            this.form.controls[i].updateValueAndValidity();
        }
        if (this.form.invalid) return;
    }
}
